import { Dropdown, Modal } from 'antd';
import { useModel } from '@umijs/max';
import IconFont from '../IconFont';
import { handleLogout } from '@/utils/authUtils';

const UserManage: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  return (
    <Dropdown
      trigger={['click']}
      placement="topLeft"
      menu={{
        onClick: ({ key }) => {
          if (key === 'exit') {
            Modal.confirm({
              type: 'warn',
              title: '是否退出登录',
              content: '退出登录后将跳转至登录界面，重新登录后才能进入系统',
              onOk: handleLogout,
              okType: 'danger',
              okText: '退出',
            });
          }
        },
        items: [
          {
            key: 'exit',
            label: <span>退出登录</span>,
          },
        ],
      }}
    >
      <span>
        <IconFont type="icon-user" />
        {window.innerWidth >= 768 && !initialState?.collapsed && (
          <span style={{ marginInlineStart: 10 }}>{initialState?.currentUser?.name}</span>
        )}
      </span>
    </Dropdown>
  );
};
export default UserManage;
